<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="工资详情"></u-navbar>
		<view class="d-p-30" v-if="info">
			<view class="d-font-32" style="font-weight: bold;color: #323334;">工资发放概况</view>
			<view class="d-m-t-10 d-font-28" style="color: #949AA2;">
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">工资期（间）</view>
					<text style="color: #162233;">{{ info.ffgzny || '无' }}</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">发放日期</view>
					<text style="color: #162233;">{{ info.ffrq || '无' }}</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">涵盖分包单位数</view>
					<text style="color: #162233;">{{ info.sub }}</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">涵盖项目数</view>
					<!-- <view class="d-flex-1">涵盖班组数</view> -->
					<text style="color: #162233;">{{ info.project }}</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">发放人数</view>
					<text style="color: #162233;">{{ info.ffrs }}人</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">发放金额</view>
					<text style="color: #162233;">{{ info.sfgzhj }}万元</text>
				</view>
			</view>

			<view class="d-font-32 d-m-t-40" style="font-weight: bold;color: #323334;">工资发放附件</view>
			<view class="demo d-flex d-font-28" style="color: #5D6672;">
				<!-- <view>工人工资表</view> -->
				<view class="table">
					<view class="tr">
						<view class="th d-p-l-30">序号</view>
						<view class="th">附件</view>
						<view class="th">数量</view>
					</view>
					<template v-if="file && file.length > 0">
						<view class="tr" v-for="(item, index) in file" :key="index" @click="fileInfo(item)">
							<view class="td d-p-l-30">{{ index + 1 }}</view>
							<view class="td">
								<text style="color: #21A5F3;">{{ item.attachName }}</text>
							</view>
							<view class="td">{{ item.count }}</view>
						</view>
					</template>
				</view>
			</view>


			<view class="d-font-32 d-m-t-40" style="font-weight: bold;color: #323334;">工资发放列表</view>
			<template v-if="list && list.length > 0">
				<view class="card d-flex d-p-30 d-m-t-30 d-col-top" v-for="(item, index) in list" :key="index">
					<view class="d-flex-1">
						<view class="d-font-28" style="font-weight: bold;color: #151C24;">姓名：漳卅</view>
						<view class="d-m-t-10 d-font-24" style="color: #5D6672;">
							<text>身份证号</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.zjhm | str }}</text>
						</view>
						<view class="d-m-t-10 d-font-24" style="color: #5D6672;">
							<text>实发金额</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.sfje }}元</text>
						</view>
					</view>
					<view>
						<u-button
							text="查看"
							size="mini"
							:customStyle="{
								color: '#FFB61D',
								borderColor: '#FFB61D'
							}"
							shape="circle"
							@click="wagesMemberInfo(item)"
						></u-button>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="d-p-80"><u-empty icon="/static/image/none.png" text="暂无数据"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import { salaryDetail, appSsd, appAtta } from '../../../common/api.js';
export default {
	data() {
		return {
			id: null,
			info: null,
			list: [],
			file: []
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.init();
	},
	methods: {
		init() {
			salaryDetail({
				params: {
					id: this.id
				}
			}).then(e => {
				this.info = e.data;
			});
			appAtta({
				params: {
					ywlx: 'salary_kqgzgl',
					ywbh: this.id
				}
			}).then(e => {
				this.file = e.data;
			});
			appSsd({
				params: {
					ywbh: this.id
				}
			}).then(e => {
				this.list = e.data;
			});
		},
		wagesMemberInfo(item) {
			uni.$u.route({
				url: '/pages/index/wages/wagesMemberInfo',
				params: {
					ywbh: item.id, // 工资发放明细id
					rybh: item.rybh // 人员编号
				}
			});
		},
		fileInfo(item) {
			let list = item.attachList;
			if (!list) {
				return uni.$u.toast('暂无附件');
			}
			uni.previewImage({
				urls: list.map(e => {
					return e.attachUrl;
				}),
				indicator: 'number',
				loop: true,
				fail: e => {
					console.error(e);
					uni.$u.toast('系统繁忙, 请稍后再试!');
				}
			});
		},
	}
};
</script>

<style lang="scss">
.card {
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
}
page {
	background-color: #fff;

	.demo {
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	.table {
		font-size: 28rpx;
		display: table;
		width: 100%;
		vertical-align: middle;
		border: 1px solid #f6f7f8;
		.tr {
			display: table-row;
			.th,
			.td {
				display: table-cell;
				height: 80rpx;
				vertical-align: middle;
			}
			.th {
				font-weight: bold;
				color: #162233;
			}
			&:nth-child(2n-1) {
				background-color: #f6f7f8;
			}
		}
	} 
}
</style>
